import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:sports_new/entity/my/help/help_entity.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/utils/routes.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/utils/widget_utils.dart';
import 'package:sports_new/view/home/news_button_area.dart';
import 'package:sports_new/widgets/card.dart';
import 'package:sports_new/widgets/base/qkd_button.dart';
import 'package:sports_new/widgets/loading/loading_widget.dart';
import 'package:visibility_detector/visibility_detector.dart';
import '../../../controller/my/help/my_help_logic.dart';
import '../../../widgets/base/qkd_text.dart';
import '../../home/qkd_carousel_view.dart';

class MyHelpPage extends StatefulWidget {
  const MyHelpPage({super.key});

  @override
  State<MyHelpPage> createState() => _MyHelpPageState();
}

class _MyHelpPageState extends State<MyHelpPage>
    with AutomaticKeepAliveClientMixin {
  late final MyHelpLogic logic;
  late final double topPadding = Get.width * 164 / 375;

  @override
  void initState() {
    logic = Get.put(MyHelpLogic());
    logic.scrollController.addListener(() {
      if (logic.num <= 1) {
        logic.num = logic.scrollController.offset / topPadding;
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<MyHelpLogic>(builder: (logic) {
      return VisibilityDetector(
        key: const Key("help"),
        onVisibilityChanged: (VisibilityInfo info) {
          update();
        },
        child: Scaffold(
            backgroundColor: Colours.greyF2F3F7,
            extendBodyBehindAppBar: true,
            appBar: Styles.appBar(
                backgroundColor: Colours.transparent,
                systemUiOverlayStyle: const SystemUiOverlayStyle(
                  statusBarIconBrightness: Brightness.light,
                ),
                title: QkdText("帮助与反馈", color: Colours.white),
                leadingColor: Colours.white,
                actions: [
                  QkdButton(
                    onPressed: () => Get.toNamed(Routes.feedbackHistory),
                    text: "反馈记录",
                    foregroundColor: Colours.white,
                    textStyle: const TextStyle(fontSize: 15),
                  ).paddingOnly(right: 16)
                ]),
            body: Stack(
              children: [
                Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  child: QkdCarouselView(
                    carousels: logic.carousel,
                    aspectRatio: 375 / 198,
                    radius: 0,
                    padding: 0,
                    dotBottom: 20,
                    needTitle: false,
                    needDot: logic.carousel.length != 1,
                  ),
                ),
                Positioned.fill(
                    child: SafeArea(
                  child: Obx(() => Container(
                        color: Colours.greyF2F3F7.withOpacity(logic.num),
                      )),
                )),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(height: topPadding),
                    if (logic.menus.hasValue)
                      Container(
                          height: 95,
                          decoration: BoxDecoration(
                              color: Colours.white,
                              borderRadius: BorderRadius.circular(8)),
                          margin: const EdgeInsets.symmetric(horizontal: 8),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              NewsButtonArea(menus: logic.menus),
                            ],
                          )),
                    Container(
                      clipBehavior: Clip.antiAlias,
                      decoration: const BoxDecoration(
                          color: Colours.greyF2F3F7,
                          borderRadius:
                              BorderRadius.vertical(top: Radius.circular(8))),
                      child: SizedBox(
                        height: 54,
                        child: ListView(
                            padding: const EdgeInsets.symmetric(
                                vertical: 10, horizontal: 8),
                            scrollDirection: Axis.horizontal,
                            children: List<Widget>.generate(
                                logic.type.length,
                                (index) => QkdButton(
                                      height: 34,
                                      width: 103,
                                      onPressed: () => logic.index = index,
                                      text: logic.type[index].name,
                                      foregroundColor: logic.index == index
                                          ? Colours.main
                                          : Colours.text,
                                      borderRadius: 8,
                                      backgroundColor: logic.index == index
                                          ? Colours.main.withOpacity(0.1)
                                          : Colours.white,
                                      borderSide: BorderSide(
                                          width: 0.5,
                                          color: logic.index == index
                                              ? Colours.main.withOpacity(0.4)
                                              : Colours.greyCC),
                                      textStyle: const TextStyle(fontSize: 13),
                                    ).paddingOnly(right: 12))),
                      ),
                    ),
                    Expanded(
                      child: LoadingWidget<bool>(
                        isLoading: logic.questions == null,
                        loading: Container(),
                        data: logic.questions
                                ?.every((element) => element.isEmpty) ==
                            true,
                        child: () => MediaQuery.removePadding(
                          context: context,
                          removeTop: true,
                          child: ListView(
                            controller: logic.scrollController,
                            children: [
                              Block(
                                  cardStyle: const CardStyle(
                                      margin:
                                          EdgeInsets.symmetric(horizontal: 8)),
                                  child: Column(
                                      children: logic.questions?[logic.index]
                                              .map((e) => item(e))
                                              .toList()
                                              .insertEvery(Container(
                                                  height: 0.5,
                                                  color: Colours.greyEE,
                                                  margin: const EdgeInsets
                                                      .symmetric(
                                                      horizontal: 12))) ??
                                          [])),
                              Container(height: 70)
                            ],
                          ),
                        ),
                      ),
                    ),
                    SafeArea(
                        top: false,
                        left: false,
                        right: false,
                        child: contact().paddingOnly(bottom: 16))
                  ],
                ),
              ],
            )),
      );
    });
  }

  Widget item(QuestionEntity? item) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () => Get.toNamed(Routes.helpDetail, arguments: item),
      child: Container(
        height: 52,
        padding: const EdgeInsets.symmetric(horizontal: 12),
        child: Row(children: [
          Expanded(child: QkdText(item?.title ?? "", fontSize: 16)),
          Container(width: 6),
          Image.asset(Utils.getImgPath("arrow_right.png"), width: 6, height: 10)
        ]),
      ),
    );
  }

  Widget contact() {
    return Row(
      children: [
        Expanded(
          child: QkdButton(
            height: 44,
            width: 103,
            onPressed: () => Get.toNamed(Routes.myContact),
            text: "联系客服",
            foregroundColor: Colours.main,
            borderRadius: 8,
            backgroundColor: Colours.white,
            borderSide: const BorderSide(width: 0.5, color: Colours.main),
            textStyle: const TextStyle(fontSize: 16),
          ),
        ),
        Container(width: 16),
        Expanded(
          child: QkdButton(
            height: 44,
            width: 103,
            onPressed: () => Get.toNamed(Routes.feedbackChoice),
            text: "我要反馈",
            foregroundColor: Colours.white,
            borderRadius: 8,
            backgroundColor: Colours.main,
            borderSide: const BorderSide(width: 0.5, color: Colours.main),
            textStyle: const TextStyle(fontSize: 16),
          ),
        ),
      ],
    ).paddingSymmetric(horizontal: 8);
  }

  @override
  bool get wantKeepAlive => true;
}
